/**
 * Created by Administrator on 2017/4/10.
 */
var Breadcrumb = require('../../../../src/libs/breadcrumb');
var InputNumber = require('../../../../src/libs/input-number');
var BackAccount = require('../../complex/backAccount');
var Checkbox = require('../../../../src/libs/checkbox');
var Button = require('../../../../src/libs/button');

var ConfirmWrap = React.createClass({
    getInitialState: function () {
        return {
            inputNum: window.PageDM.inputNum.value
        }
    },
    investSumChangeHandler: function (v) {
        var FinanceDetail = this.state.inputNum.FinanceDetail;
        var v = parseInt(v / FinanceDetail.AppendBuyAmount) * FinanceDetail.AppendBuyAmount;
        var val = UMath.Earnings(v, this.state.inputNum.FinanceDetail.Interest, this.state.inputNum.FinanceDetail.Duration, PageDM.days.value);
        val = UFormatter.formatMoney(val,2);
        window.PageDM.inputNum.value.FinanceDetail.PartsCount = v;
        this.refs.expectedReturn.innerHTML = val;
        this.refs.inputnumber.setValue(v);
    },
    componentDidMount:function () {
        // this.investSumChangeHandler(this.state.inputNum.FinanceDetail.PartsCount);//初始预期收益
    },
    render:function () {
        var _this = this, FinanceDetail = _this.state.inputNum.FinanceDetail;
        var expect = UMath.Earnings(FinanceDetail.PartsCount, FinanceDetail.Interest, FinanceDetail.Duration, PageDM.days.value);//预期收益
        expect = UFormatter.formatMoney(expect,2);

        //已登录
        var loginMax = FinanceDetail.MaxInvestPartsCount * FinanceDetail.EachPartAmount,
            MinInvest = FinanceDetail.MinInvestPartsCount * FinanceDetail.EachPartAmount;

        var PartsCount = Number(FinanceDetail.PartsCount)?Number(FinanceDetail.PartsCount):0;

        //尾单金额
        var _value = FinanceDetail.PartsCount;
        if(loginMax < MinInvest && FinanceDetail.RemainPartsCount > 0){
            _value = FinanceDetail.RemainPartsCount * FinanceDetail.EachPartAmount;
        }
        return(
            <div className="confirm-box">
                <h3>{this.state.inputNum.FinanceDetail.ProjectName}</h3>
                <table className="table-1">
                    <tbody>
                    <tr>
                        <th width="500">投标总额</th>
                        <th>预期收益</th>
                        <th>到期回款日</th>
                    </tr>
                    <tr>
                        <td>
                            <div>
                                <span>
                                    <InputNumber step={FinanceDetail.AppendBuyAmount}
                                                 max={FinanceDetail.EachPartAmount * FinanceDetail.MaxInvestPartsCount}
                                                 min={FinanceDetail.EachPartAmount * FinanceDetail.MinInvestPartsCount}
                                                 value={_value}
                                                 disabled={(FinanceDetail.ProjectStatus>2 || FinanceDetail.RemainPartsCount < FinanceDetail.MinInvestPartsCount)? true:false}
                                                 onChange={_this.investSumChangeHandler.bind(_this)}
                                                 ref="inputnumber"/>
                                </span>
                                <span>元</span>
                            </div>
                            <p className="fc-main warm">
                                {
                                    (loginMax < MinInvest) ?
                                        (FinanceDetail.RemainPartsCount > 0 ?
                                            <p>您在此项目的剩余可投金额为{UFormatter.formatMoney(FinanceDetail.RemainPartsCount * FinanceDetail.EachPartAmount)}元</p> :
                                            <p>您在此项目的剩余可投金额不足，请选择其他项目</p>
                                        ) :
                                        <p>您在此项目的剩余可投金额为{UFormatter.formatMoney(loginMax)}元</p>
                                }
                            </p>
                        </td>
                        <td><b className="fc-main fs20" ref="expectedReturn">{expect}</b> 元</td>
                        <td>{this.state.inputNum.FinanceDetail.RepayBegin}</td>
                    </tr>
                    </tbody>
                </table>
            </div>
        )
    }
});
var CheckWrap = React.createClass({
    getInitialState: function () {
        return {
            checkbox:PageDM.checkbox,
            url:this.props.url
        }
    },
    checkboxClick:function(v){
        PageDM.checkbox.setValue(v);
        PageDM.checkbox.onClick(v);
    },
    render:function () {
        var _this = this;
        return(
            <div className="check">
                <Checkbox text=" 我已阅读并同意" value={_this.state.checkbox.value} onClick={_this.checkboxClick}/>
                <a className="fc-link" onClick={_this.state.url.agreement.onClick} href="javascript:void (0)" target="_blank">《{_this.state.url.agreement.name}》</a>
            </div>
        )
    }
})
var Step1 = React.createClass({
    getInitialState: function () {
        return {
            // inputNum:window.PageDM.inputNum.value,
            // PayBankCards:window.PageDM.PayBankCards.value,
            // userInfo:window.PageDM.userInfo.value,
            investSum:0,//预期收益
            // BankCardList: window.PageDM.BankCardList.value,
            payType: PageDM.payType.value
        }
    },
    getRefs:function (ref) {
        return this.refs[ref];
    },
    componentDidMount: function () {
        var _this = this;
        var PageDM = window.PageDM;

        //确认投资金额
        UEventHub.on(PageDM.inputNum.dmbind + UI_EVENT_CONST.SET_UDM_VALUE_EVENT, function (v) {
            _this.refs.confirmWrap.setState({
                inputNum:v
            });
        });
    },
    render: function () {
        var _this = this;

        return (
            <div>
                <Breadcrumb separator='>'>
                    <Breadcrumb.Item href={PageDM.URL.value.home}>首页</Breadcrumb.Item>
                    <Breadcrumb.Item href={PageDM.URL.value.invest}>我要投资</Breadcrumb.Item>
                    <Breadcrumb.Item>确认投资金额</Breadcrumb.Item>
                </Breadcrumb>
                <div className="project-ok">
                    <div className="title"><b></b>确认投资金额<b></b></div>
                    <ConfirmWrap ref="confirmWrap"/>
                    <BackAccount ref="backAccount"/>

                    <div className="confirm-agree">
                        <CheckWrap ref="checkWrap" url={PageDM.URL.value}/>
                        <div className="fc-light tip">
                            <p><span>*</span> <b>温馨提示</b>建议选择使用IE或者带IE内核的浏览器进行投标支付。</p>
                            <p><span>*</span> <b>免责声明</b>预期收益仅供参考，具体以实际发生收益为准。
                            </p>
                        </div>
                    </div>
                    <div className="confirm-btn">
                        <Button value="确定购买" className="ucs-btn-confirm btn-block" onClick={PageDM.btn.onClick} dmbind={PageDM.btn.dmbind}/>
                    </div>

                    <span className="angle angle-top"></span>
                    <span className="angle angle-bottom"></span>
                </div>
            </div>
        )
    }
});
module.exports = Step1;